<template stype = "    margin: 0;">
  <div id="author-article-manage">
    <div style="margin-inline: 25px;">
      <h2 style="float:left;">我的作品</h2>
      <el-button
        @click="insert"
        style="float:right;margin:20px;height:100%"
        icon="el-icon-circle-plus"
        type="primary"
      >新增</el-button>
      <el-divider style="margin-top: 10px;"></el-divider>
    </div>
    <div style="margin-inline: 25px;">
      <el-table :data="tableData" style="width: 100%" height="450">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.audits" :show-header="false">
              <el-table-column prop="state" label="审批结果" width="180" :formatter="setState"></el-table-column>
              <el-table-column prop="suggestion" label="审批建议" width="180" show-overflow-tooltip></el-table-column>
              <el-table-column prop="createTime" label="日期" width="180"></el-table-column>
              <el-table-column prop="createName" label="审批人" width="180"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="articleName" label="名称" width="180"></el-table-column>
        <el-table-column prop="introduction" label="简介" show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createTime" label="日期" width="180"></el-table-column>
        <el-table-column prop="state" label="状态" width="180" :formatter="setState"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="alterOne(scope.row)"
              v-show="scope.row.canAlter"
            >修改</el-button>
            <el-button
              type="text"
              size="small"
              @click="detailOne(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页面分页栏 -->
      <el-pagination
        layout="total,prev, pager, next"
        :total="total"
        @current-change="currentChange"
        @prev-click="prev"
        @next-click="next"
        :page-size="10"
        width="100"
        align="center"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageOn: 1,
      total: 0,
      canAlter: true,
    };
  },
  methods: {
    insert() {
      this.$router.push({ path: "/index/writing" });
    },
    alterOne(row) {
      this.$router.push({ name: "Alter", params: row });
    },
    detailOne(row){
      this.$router.push({ name: "ArticleDetail", params: row });
    },
    getPage() {
      var user = JSON.parse(localStorage.user);
      this.COMMON.httpPost(
        this,
        "articleOperation/getPageAuthor",
        { pageOn: this.pageOn, pageSize: 10, data: { authorId: user.id } },
        (result) => {
          if (result.result === "SUCCESS") {
            this.tableData = result.list;
            this.total = result.total;
          }
        },
        (result) => {}
      );
    },
    setState(row) {
      if (row.state === "0") {
        row.canAlter = true;
        return "待审核";
      } else if (row.state === "2") {
        row.canAlter = false;
        return "已发表";
      } else if (row.state === "1") {
        row.canAlter = true;
        return "待修改";
      } else if (row.state === "3") {
        row.canAlter = false;
        return "弃稿";
      }
    },
    // 点击上一页调用
    prev(val) {
      this.pageOn = this.pageOn - 1;
      this.getPage();
    },
    // 点击下一页调用
    next(val) {
      this.pageOn = this.pageOn + 1;
      this.getPage();
    },
    // 当前页码修改时调用
    currentChange(val) {
      this.pageOn = val;
      this.getPage();
    },
  },
  mounted() {
    this.getPage();
  },
};
</script>

<style>
#author-article-manage {
  height: 100%;
  width: 100%;
  margin: 0;
}
</style>